<template>
  <div style="max-width: 1200px; margin: 0 auto; padding: 20px; font-family: 'Microsoft Yahei'">
    <!-- 搜索卡片 -->
    <el-card style="height: 70px; margin: 5px;">
      <el-form :inline="true">
        <el-form-item label="套卷名称" style="width: 270px;">
          <el-input
              placeholder="请输入套卷名称"
              v-model="searchPaper.paperName"
              @keydown.enter="loadPaper"></el-input>
        </el-form-item>
        <el-form-item label="套卷描述" style="width: 270px;">
          <el-input
              placeholder="请输入套卷描述关键词"
              v-model="searchPaper.paperDesc"
              @keydown.enter="loadPaper"
          ></el-input>
        </el-form-item>
        <el-form-item label="套卷状态" style="width: 270px;">
          <el-select
              placeholder="请选择套卷状态"
              v-model="searchPaper.status"
              @change="loadPaper">
            <el-option label="全部状态" value=""></el-option>
            <el-option label="未发布" value="0"></el-option>
            <el-option label="已发布" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetSearch">重置</el-button>
          <el-button type="primary" @click="loadPaper">查询</el-button>
        </el-form-item>
        <!-- 右上角组卷按钮 -->
        <el-button type="primary" style="float: right;">组卷</el-button>
      </el-form>
    </el-card>

    <!-- 套卷列表-->
    <div style="margin-top: 20px;">
      <div style="border: 1px solid #eee; padding: 15px;
      border-radius: 4px; background: #fff;"
          v-for="paper in paperArr" :key="paper.paperId">
        <h3 class="paper-title">{{ paper.paperName }}</h3>
        <p class="paper-info">套卷描述：{{ paper.paperDesc }}</p>
        <p class="paper-info">创建时间：{{ paper.createdTime }}</p>
        <p style="margin: 5px 0; font-size: 14px; color: #666;">
         套卷状态：<span :style="{color: statusStyle[paper.status].color,
            fontWeight: 'bold',fontSize: '15px'}">
          {{ statusMap[paper.status] }}</span></p>
        <div class="paper-meta">
          <span class="meta-item">题目数量：{{ paper.count }} 题</span>
          <span class="meta-item">总分：{{ paper.totalScore }} 分</span>
          <div class="operate-buttons">
            <el-button type="primary">编辑套卷</el-button>
            <el-button type="danger">删除套卷</el-button>
            <el-button type="danger">重新发布</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';
import qs from "qs";
import axios from "axios";
const router = useRouter();
const statusStyle = ref({
  '0': { color: '#ff7d00' },
  '1': { color: '#00b42a' }
});
// 搜索条件
const searchPaper = ref({
  paperName: '',
  paperDesc: '',
  status: ''
});
const statusMap = ref({
  '0': '未发布',
  '1': '已发布'});
// 定义套卷列表
const paperArr = ref([]);
// 加载套卷列表
const loadPaper = () =>{
    let data = qs.stringify(searchPaper.value);
    axios.get(BASE_URL+'/v1/paper/select?'+data).then((res)=>{
      if (res.data.code == 200){
        paperArr.value = res.data.data;
        console.log(paperArr.value);
      }else{
        ElMessage.error(res.data.message);
      }
  })
};
// 重置搜索条件
const resetSearch = () => {
  searchPaper.value = {
    paperName: '',
    paperDesc: '',
    status: ''
  };
  loadPaper();
};

// 初始化加载套卷列表
onMounted(() => {
  loadPaper();
});
</script>

<style scoped>
.paper-title {
  color: #0066cc;
  margin-top: 0;
  margin-bottom: 10px;
}
.paper-info {
  margin: 5px 0;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}
.paper-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px solid #eee;
  flex-wrap: wrap;
  gap: 10px;
}
.meta-item {
  font-size: 14px;
  color: #333;
  margin-right: 15px;
}
.operate-buttons {
  display: flex;
  gap: 8px;
}
</style>
